import React, { useState } from 'react';
import { Card, Row, Col, Spin } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import moment from 'moment';
import { WeekMonthDate } from '@/components/WeekMonthDate';
import { formatDate } from '../utils';
import { useUserTaskInfo, useTaskList } from '../hooks';
import { WorkOverview, TaskList } from '../components/EmployeeInfo';

const EmployeeInfo = ({ location }) => {
    const { query } = location;

    // 维护参数
    const [params, setParams] = useState({
        reportType: query.reportType || 1,
        userId: query.userId,
        startDate: query.startDate || formatDate('1', moment()).startDate,
        endDate: query.endDate || formatDate('1', moment()).endDate
    });

    // 维护列表参数
    const [taskParams, setTaskParams] = useState({
        reportType: query.reportType || 1,
        pageSize: query.pageSize || 500,
        userId: query.userId,
        startDate: query.startDate || formatDate('1', moment()).startDate,
        endDate: query.endDate || formatDate('1', moment()).endDate
    });

    const [workLoading, workData] = useUserTaskInfo(params); // 拉取工作概况数据
    const [taskLoading, taskData] = useTaskList(taskParams); // 拉取任务清单数据

    // 列表查询
    const handleTaskSearch = obj => {
        setTaskParams({ ...taskParams, ...obj });
    };

    // 查询条件变更
    const handleDateChange = e => {
        const { startDate, endDate, reportType } = e;
        setParams({ ...params, startDate, endDate, reportType });
        setTaskParams({ ...taskParams, startDate, endDate, reportType });
    };

    return (
        <PageHeaderWrapper>
            <Card bordered={false}>
                <WeekMonthDate
                    value={query.startDate}
                    reportType={query.reportType}
                    onChange={e => handleDateChange(e)}
                />
            </Card>
            <Row gutter={24} style={{ marginTop: 24 }}>
                <Col xl={{ span: 9 }} lg={{ span: 24 }}>
                    <Spin spinning={workLoading}>
                        <WorkOverview data={workData} query={params} />
                    </Spin>
                </Col>
                <Col xl={{ span: 15 }} lg={{ span: 24 }}>
                    <Spin spinning={taskLoading}>
                        <TaskList data={taskData} workData={workData} query={taskParams} onSearch={handleTaskSearch} />
                    </Spin>
                </Col>
            </Row>
        </PageHeaderWrapper>
    );
};

export default EmployeeInfo;
